{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">添加阀值信息</h2>
        <form class="form-horizontal" action="{{ request.path }}" onsubmit="return validateForm()" method="post">
            <div class="form-group">
                <label class="col-sm-2 control-label">name： </label>
                <div class="col-sm-10">
                    <select class="selectpicker show-tick " data-live-search="true" name="monitor_name"
                            style="width:300px;" id="monitor_name">
                        <option id="def">--请选择监控名称--</option>
                        {% for i in host_key_list %}
                            <option id="a">{{ i }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">point:</label>
                <div class="col-sm-10" id="monitor_point_div" name="monitor_point_div">
                    <select class="form-control" name="monitor_point" style="width:300px;" id="a">>
                        <option id="def">--请选择监控点--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">limit：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_limit" placeholder="阀值">
                </div>
            </div>
                   <div class="form-group">
                <label class="col-sm-2 control-label">remake：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_monitor_type"
                           value="host" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">remake：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_remake"
                           placeholder="备注">
                </div>
            </div>
            <div class="col-sm-10">
                {#                <button type="submit" class="btn ">提交</button>#}
                <div style="text-align:center;vertical-align:middle;"><input type="submit" style="text-align:center;"
                                                                             class="btn" value="提交"></div>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script>
        function validateForm() {
            var monitor_name = $('#monitor_name').find("option:checked").attr("id")
            var monitor_point = $('#monitor_point').find("option:checked").attr("id")
            if (monitor_name == 'def') {
                alert('请选择监控名称')
                return false;
            } else if (monitor_point == 'def') {
                alert('请选择监控点')
                return false;
            }
        }


        //根绝不同的功能点进行ajax访问数据库返回参数列表
        $('#monitor_name').change(function () {
            tool_name_id = $('#monitor_name').find("option:checked").attr("id");
            if (tool_name_id == 'a') {
                $("#monitor_point_div").empty()
                $.ajax({
                    type: "POST",
                    data: {
                        'monitor_name': $('#monitor_name').val()
                    },
                    url: "/oratk_app/oratk_monitor_limit_add_host_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        console.log(result)
                        $("#monitor_point_div").html(result);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    },
                })
            } else {
                $("#monitor_point_div").empty()
                $("#monitor_point_div").append('<select class="form-control" name="monitor_name" style="width:300px;" id="a">>\n' +
                    '                        <option id="def">--请选择监控点--</option>\n' +
                    '                    </select>');
            }

        })
    </script>


{% endblock %}